<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:comps="http://java.sun.com/jsf/composite/comps" >

     <body>

          <ui:composition template="./../../resources/templates/newTemplate.xhtml">

               <ui:define name="left">
                    <comps:admPanel />
               </ui:define>

               <ui:define name="principal">
                    <h:outputScript library="javascript" name="util.js" />
                    <h:form id="formPeriodo">  
                         <p:growl id="messages" />
                         <p:dataTable var="per" value="#{periodo.periodosAlquiler}" 
                                      id="tablaPeriodos" >  
                             <p:ajax event="rowEdit" listener="#{periodo.modificarPeriodo}" />
                              <f:facet name="header">  
                                   Periodos de Alquiler  
                              </f:facet>  
                              <p:column headerText="Nombre" >  
                                   <p:cellEditor>  
                                        <f:facet name="output">  
                                             <h:outputText value="#{per.nombre}" style="width:120px"/>  
                                        </f:facet>  
                                        <f:facet name="input">  
                                             <p:inputText value="#{per.nombre}" style="width:120px"/>  
                                        </f:facet>  
                                   </p:cellEditor>  
                              </p:column>  

                              <p:column headerText="Descripción" >  
                                   <p:cellEditor>  
                                        <f:facet name="output">  
                                             <h:outputText value="#{per.descripcion}" style="width:120px"/>  
                                        </f:facet>  
                                        <f:facet name="input">  
                                             <p:inputText value="#{per.descripcion}" style="width:120px"/>  
                                        </f:facet>  
                                   </p:cellEditor>  
                              </p:column>  

                              <p:column headerText="Horas" >  
                                   <p:cellEditor>  
                                        <f:facet name="output">  
                                             <h:outputText value="#{per.horas}" style="width:60px"/>  
                                        </f:facet>  
                                        <f:facet name="input">  
                                             <p:inputText value="#{per.horas}" style="width:60px" />  
                                        </f:facet>    
                                   </p:cellEditor>  
                              </p:column>  

                              <p:column headerText="Opciones" style="width:70px">  
                                   <p:rowEditor />
                                   <p:commandButton update="tablaPeriodos,messages" oncomplete="confirmacion.show()" 
                                                    image="ui-icon ui-icon-trash" title="Quitar" >
                                        <f:setPropertyActionListener value="#{per}" target="#{periodo.periodoSeleccionado}" />
                                   </p:commandButton>
                              </p:column>  

                         </p:dataTable>  

                         <p:commandButton id="botonNuevo" value="Nuevo Periodo" title="Nuevo" 
                                          oncomplete="nuevoPeriodo.show()" style="text-align:center"/>

                         <p:confirmDialog message="Esta seguro?" width="200" header="Confirmar"
                                          severity="alert" widgetVar="confirmacion" >
                              <p:commandButton value="Si" actionListener="#{periodo.borrarPeriodo}"
                                               oncomplete="confirmacion.hide()" action="periodos"/>
                              <p:commandButton value="No" onclick="confirmacion.hide()" type="button" />
                         </p:confirmDialog>
                    </h:form>

                    <p:dialog id="dialogo" header="Nuevo Periodo" widgetVar="nuevoPeriodo" >
                         <h:form id="perDialog">
                              <h:panelGrid columns="3" >
                                   <h:outputLabel value="Nombre" />
                                   <p:inputText id="nombreNuevo" value="#{periodo.nombre}" required="true"
                                                requiredMessage="Valor requerido"/>
                                   <p:message for="nombreNuevo" />
                                   <h:outputLabel value="Descripcion" />
                                   <p:inputText id="descNuevo" value="#{periodo.descripcion}" />
                                   <p:message for="descNuevo" />
                                   <h:outputLabel value="Horas" />
                                   <p:inputText id="horasNuevo" value="#{periodo.horas}" required="true" 
                                                requiredMessage="Valor Requerido"/>
                                   <p:message for="horasNuevo" />
                                   <f:facet name="footer" >
                                        <p:commandButton value="Guardar" actionListener="#{periodo.registrarPeriodo}"
                                                         oncomplete="nuevoPeriodo.hide()"
                                                         action="periodos"/>
                                        <p:commandButton value="Limpiar" type="reset" />
                                   </f:facet>
                              </h:panelGrid>
                         </h:form>
                    </p:dialog>  

               </ui:define>

          </ui:composition>

     </body>
</html>
